<template>
  <el-drawer :title="title" :visible.sync="visible" append-to-body class="drawer-container" size="400px">
    <el-form ref="form" :model="formdata" :rules="formrule" label-width="140px" label-position="right" label-suffix="：">
      <el-form-item label="序列号名称" prop="name">
        <el-input v-model="formdata.name" placeholder="请输入序列号名称"/>
      </el-form-item>
      <el-form-item label="业务名称" prop="busCode">
        <el-select v-model="formdata.busCode" :disabled="formdata.id !== undefined" style="width:100%"
                   @change="handleSelectBus">
          <el-option v-for="item in dict.type.bus_serial_code" :key="item.id" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="表达式前缀" prop="prefix">
        <el-input v-model="formdata.prefix" maxlength="6" placeholder="请输入表达式前缀" @change="handleExpression"/>
      </el-form-item>
      <el-form-item label="生成周期" prop="format">
        <el-select v-model="formdata.format" clearable placeholder="请选择" style="width:100%"
                   @change="handleChange">
          <el-option label="每天" value="yyyyMMdd"/>
          <el-option label="每月" value="yyyyMM"/>
          <el-option label="每年" value="yyyy"/>
        </el-select>
      </el-form-item>
      <el-form-item label="编码长度" prop="length">
        <el-input-number v-model="formdata.length" :max=10 placeholder="请输入编码长度" style="width: 100%"
                         @change="handleExpression"/>
      </el-form-item>
      <el-form-item label="配置表达式" prop="template">
        <el-input v-model="formdata.template" :disabled="true"/>
      </el-form-item>
      <el-form-item label="状态" prop="enable">
        <el-radio-group v-model="formdata.status">
          <el-radio-button v-for="item in localDict.system_status" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="drawer-footer">
      <el-button size="mini" :loading="loading" type="primary" @click="handleSubmit">确 定</el-button>
      <el-button size="mini" @click="handleCancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>

import {getOne, save} from "@/api/base";

export default {
  name: "SerialModelCard",
  dicts: ['bus_serial_code'],
  components: {},
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      baseUrl: '/config/serial',
      formdata: {},
      formrule: {
        name: [
          {required: true, message: "规则名称不能为空", trigger: "blur"}
        ],
        busCode: [
          {required: true, message: "业务名称不能为空", trigger: "blur"}
        ],
        prefix: [
          {required: true, message: "表达式前缀不能为空", trigger: "blur"},
          {max: 6, message: "表达式前缀不能超过6个字符", trigger: "blur"},
          {type: 'string', pattern: /^[A-Z]+$/, message: '表达式前缀只允许输入大写字母', trigger: 'blur'}
        ],
        format: [
          {required: true, message: "生成周期不能为空", trigger: "blur"},
        ],
        length: [
          {required: true, message: "编码长度不能为空", trigger: "blur"},
        ],
      },
      localDict: {
        system_status: [],
      },
    }
  },
  created() {
    this.getLocalDict();
  },
  methods: {
    add() {
      this.resetForm('form')
      this.formdata = {
        status: '00'
      }
      this.visible = true
      this.title = '新增序列号'
    },
    edit(id) {
      this.resetForm('form')
      getOne(this.baseUrl, id).then(res => {
        this.formdata = res.data
        this.visible = true
        this.title = '修改序列号'
      })
    },
    async getLocalDict() {
      await this.getStaticData('system-status').then(res => {
        this.localDict.system_status = res.data
      })
    },
    handleSelectBus(row) {
      console.log(row)
      this.$set(this.formdata, "code", row)
    },
    handleExpression() {
      this.formdata.expression = '';
      for (let i = 0; i < this.formdata.length; i++) {
        this.formdata.expression += '0'
      }
      this.handleChange()
    },
    handleChange() {
      this.formdata.template = this.formdata.prefix + "${" + this.formdata.format + "}" + this.formdata.expression;
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          save(this.baseUrl, this.formdata).then(() => {
            this.$modal.msgSuccess("保存成功");
            this.visible = false;
            this.resetForm('form')
            this.$emit('ok')
          }).finally(() => {
            this.loading = false
          });
        }
      });
    },
    handleCancel() {
      this.visible = false
      this.resetForm('form')
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
